<template>
  <div class="strut-div">
    <div id="basic-area" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "BasicAreaChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        console.log('initChart');

        let option = {
          grid: {
            left: 40,
            top: 25,
            right: 25,
            bottom: 20,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: '', // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              interval: 0,
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(10,61,102,0.5)'
              }
            },
            axisLine: {
              show: false,
            }

          },
          series: [{
            type: 'line',
            smooth: true,
            color: '#00F6FF',
            lineStyle: {
              color: '#007187'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#007187' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#002140' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          }],
          textStyle: {
            color: this.config.x.color
          }
        }
        setTimeout(() => {
          option.xAxis.data = ['行政处罚', '行政检查', '行政许可', '行政确认', '行政征收', '行政给付', '行政强制'];
          option.series[0].data = [155, 2000, 2850, 1550, 950, 1320, 520];

          this.chart.setOption(option);
					this.timeTicket = autoHover.autoHover(this.chart,option,option.xAxis.data.length);
        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('basic-area'));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
